<!--制浆机-皮带-->
<template>
  <main class="main-container">
    <div class="content-container">
      <div class="search-container">
        <div style="display: flex">
          <el-text>保养项目名称：</el-text>
          <div style="margin-left: 10px">
            <el-select filterable clearable style="width: 240px" placeholder="请选择要检索的项目">
              <!-- <el-option
              v-for="item in partStore.projectNames"
              :key="item"
              :label="item"
              :value="item"
            /> -->
            </el-select>
          </div>
        </div>
      </div>
      <el-scrollbar style="height: 100%; width: 100%; margin-top: 20px">
        <el-card style="display: flex; justify-content: center; position: relative">
          <div style="position: absolute; left: 20px; top: 20px">
            <span style="font-size: large; font-weight: bold">传动带使用寿命</span>
          </div>
          <el-progress type="dashboard" :percentage="80" :status="beltStatus">
            <template #default="{ percentage }">
              <span class="percentage-value">{{ percentage }}%</span>
              <span class="percentage-label">Life</span>
            </template>
          </el-progress>
          <div
            style="
              float: right;
              height: 100%;
              display: flex;
              flex-direction: column;
              justify-content: center;
              margin-left: 20px;
            "
          >
            <div>
              <span>当前寿命：{{ currentLife }} day</span>
            </div>
            <div style="margin-top: 10px">
              <span>预警寿命：{{ warningLife }} day</span>
            </div>
            <div style="margin-top: 10px">
              <span>停机寿命：{{ stopLife }} day</span>
            </div>
          </div>
        </el-card>
        <el-card
          style="display: flex; justify-content: center; position: relative; margin-top: 20px"
        >
          <div style="position: absolute; left: 20px; top: 20px">
            <span style="font-size: large; font-weight: bold">传动带转速</span>
          </div>
          <v-chart style="width: 600px; height: 400px" class="chart" :option="option" />
        </el-card>
      </el-scrollbar>
    </div>
  </main>
</template>

<script lang="ts" setup>
import { computed, ref, watch } from 'vue'
import { use } from 'echarts/core'
import { LineChart } from 'echarts/charts'
import {
  GridComponent,
  TooltipComponent,
  LegendComponent,
  TitleComponent,
  VisualMapComponent
} from 'echarts/components'
import { CanvasRenderer } from 'echarts/renderers'
import VChart from 'vue-echarts'
use([
  CanvasRenderer,
  GridComponent,
  LineChart,
  TooltipComponent,
  LegendComponent,
  TitleComponent,
  VisualMapComponent
])

const currentLife = ref(300)
const warningLife = ref(300)
const stopLife = ref(365)
const data = [
  ['2000-06-05', 116],
  ['2000-06-06', 129],
  ['2000-06-07', 135],
  ['2000-06-08', 86],
  ['2000-06-09', 73],
  ['2000-06-10', 85],
  ['2000-06-11', 73],
  ['2000-06-12', 68],
  ['2000-06-13', 92],
  ['2000-06-14', 130],
  ['2000-06-15', 245],
  ['2000-06-16', 139],
  ['2000-06-17', 115],
  ['2000-06-18', 111],
  ['2000-06-19', 309],
  ['2000-06-20', 206],
  ['2000-06-21', 137],
  ['2000-06-22', 128],
  ['2000-06-23', 85],
  ['2000-06-24', 94],
  ['2000-06-25', 71],
  ['2000-06-26', 106],
  ['2000-06-27', 84],
  ['2000-06-28', 93],
  ['2000-06-29', 85],
  ['2000-06-30', 73],
  ['2000-07-01', 83],
  ['2000-07-02', 125],
  ['2000-07-03', 107],
  ['2000-07-04', 82],
  ['2000-07-05', 44],
  ['2000-07-06', 72],
  ['2000-07-07', 106],
  ['2000-07-08', 107],
  ['2000-07-09', 66],
  ['2000-07-10', 91],
  ['2000-07-11', 92],
  ['2000-07-12', 113],
  ['2000-07-13', 107],
  ['2000-07-14', 131],
  ['2000-07-15', 111],
  ['2000-07-16', 64],
  ['2000-07-17', 69],
  ['2000-07-18', 88],
  ['2000-07-19', 77],
  ['2000-07-20', 83],
  ['2000-07-21', 111],
  ['2000-07-22', 57],
  ['2000-07-23', 55],
  ['2000-07-24', 60]
]
const dateList = data.map(function (item) {
  return item[0]
})
const valueList = data.map(function (item) {
  return item[1]
})

const option = {
  // Make gradient line here
  visualMap: [
    {
      show: false,
      type: 'continuous',
      seriesIndex: 0,
      min: 0,
      max: 400
    },
    {
      show: false,
      type: 'continuous',
      seriesIndex: 1,
      dimension: 0,
      min: 0,
      max: dateList.length - 1
    }
  ],
  title: [
    {
      left: 'center',
      text: '转速'
    },
    {
      top: '55%',
      left: 'center',
      text: '电流值'
    }
  ],
  tooltip: {
    trigger: 'axis'
  },
  xAxis: [
    {
      data: dateList
    },
    {
      data: dateList,
      gridIndex: 1
    }
  ],
  yAxis: [
    {},
    {
      gridIndex: 1
    }
  ],
  grid: [
    {
      bottom: '60%'
    },
    {
      top: '65%'
    }
  ],
  series: [
    {
      type: 'line',
      showSymbol: false,
      data: valueList
    },
    {
      type: 'line',
      showSymbol: false,
      data: valueList,
      xAxisIndex: 1,
      yAxisIndex: 1
    }
  ]
}

const beltStatus = computed(() => {
  if (currentLife.value >= stopLife.value) {
    return 'exception'
  } else if (currentLife.value >= warningLife.value) {
    return 'warning'
  } else {
    return 'success'
  }
})
</script>

<style scoped>
.percentage-value {
  display: block;
  margin-top: 10px;
  font-size: 28px;
}
.percentage-label {
  display: block;
  margin-top: 10px;
  font-size: 12px;
}

.main-container {
  display: flex;
  flex-direction: column;
  overflow: hidden;
  height: 100%;
}

.content-container {
  padding: 30px 30px 20px;
  background-color: #fff;
  border: 1px solid #ddd;
  border-radius: 5px;
  display: flex;
  flex-direction: column;
  height: 100%;
}

.text {
  font-size: 14px;
}

.item {
  padding: 18px 0;
}

.box-card {
  width: 100%;
  display: flex;
  height: 500px;
  justify-content: center;
}
</style>
